<template>
  <a-list>
    <a-list
      :grid="{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }"
      :dataSource="dataSource">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-card :hoverable="true">
          <a-card-meta>
            <div style="margin-bottom: 3px" slot="title">飞机票</div>
            <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" >飞机</a-avatar>
            <div class="meta-cardInfo" slot="description">
              <div>
                <p>可定舱位：
                  <span>{{ item.level }}</span>
                </p>
              </div>

            </div>
          </a-card-meta>

        </a-card>
      </a-list-item>
    </a-list>
  </a-list>
</template>

<script>
  import AList from 'ant-design-vue/es/list'
  import AListItem from 'ant-design-vue/es/list/Item'

  export default {
    name: "Project",
    components: {
      AList,
      AListItem
    },
    data() {
      return {
        dataSource: [],
      }
    },

    mounted () {
      this.getTrains()
    },
    methods: {
      getTrains() {
        this.$http.get('/travel/my/plane')
          .then(res => {
            this.dataSource = res.result
          })
      }
    }
  }
</script>

<style scoped>

</style>